<script>
    import BaseNavigationBar from '@c/BaseNavigationBar/BaseNavigationBar.vue'//自定义标题栏
    import {getcoordinate, getPosistion} from '@u/getUserPosition'//获取地理位置信息
    import BaseBanner from '@c/BaseBanner/BaseBanner'//轮播图
    import {List, exclusiveList, ShopList} from './featureList' //功能区列表
    import {Utils} from '@u'
    import BaseShopList from '@c/BaseShopList/BaseShopList'//店铺列表
    import BaseLoading from '@c/BaseLoading/BaseLoading'//加载动画
    import BaseMessage from '@c/BaseMessage/BaseMessage'
    export default {
        data() {
            return {
                imgUrls: [
                    'https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shouye/bannerimg.png',
                    'https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shouye/banner1.png',
                    'https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shouye/banner3%402x.png',
                ],
                bannerClass:'indexBanner',//首页banner
                showLoading: false,//动画加载
                videoTitle: '自定义标题',
                longitude: '',//经度
                latitude: '',//纬度
                posLabel: '济南',
                getPosistion,
                List,
                exclusiveList,
                ShopList,
                Utils,
                tagList: ['价格实惠', '水果新鲜', '服务热情'],
                starIndex4: 5,
                starsize: '13',
                showmessage: false,
                mymessage: '',

            }
        },

        components: {
            BaseNavigationBar,
            BaseBanner,
            BaseShopList,
            BaseLoading,
            BaseMessage
        },

        methods: {
            /**
             * @Description 全局消息提示
             * @author Anonymous
             * @date 2019/6/6
             */
            myMessage(message) {
                this.mymessage = message
                this.showmessage = true
                setTimeout(() => {
                    this.mymessage = ''
                    this.showmessage = false
                }, 1500)
            },
            /**
             * @Description 重新获取定位
             * @author 焦政
             * @date 2019/4/28
             */
            async e_getLoaction() {
                let vue_this = this
                wx.getLocation({
                    type: 'wgs84',
                    async success(res) {
                        let coordinate = {
                            longitude: res.longitude,
                            latitude: res.latitude
                        }
                        let posParams = await getPosistion(coordinate)
                        vue_this.$store.dispatch('SetRedeemData', posParams)
                        vue_this.currentPos = wx.getStorageSync('position')
                        vue_this.currentCity = wx.getStorageSync('city')
                        wx.switchTab({
                            url: '/pages/index/main'
                        })
                    }
                })
            },
            /**
             * @Description 获取当前地理位置坐标
             * @author 焦政
             * @date 2019/4/26
             */
            async getLocation() {
                let coordinate = await getcoordinate();
                let posParams = await getPosistion(coordinate);
                this.$store.dispatch('SetRedeemData', posParams);
                this.posLabel = this.$store.getters.position;
            },

            /**
             * @Description 跳转页面
             * @author 焦政
             * @date 2019/4/27
             */
            e_go(v) {
                if (v.isOpen && v.path) {
                    wx.navigateTo({
                        url: v.path
                    })
                } else {
                    this.myMessage('敬请期待')
                }

            },
            /**
             * @Description 跳转页面
             * @author Anonymous
             * @date 2019/6/4
             */
            e_gopage(page) {
                wx.navigateTo({
                    url: page
                })
            },
        },
        onShow() {
            if (!Boolean(wx.getStorageSync('position')) || !this.$store.getters.position) {
                this.e_getLoaction()
            }
            this.posLabel = this.$store.getters.position
        },
        created() {
            this.getLocation()
        }
    }
</script>
<template>
    <div>
        <!--自定义标题部分-->
        <section class="sec-nav">
            <BaseNavigationBar :title="videoTitle"
                               :navBackgroundColor="'#FF4C4C'"
                               :titleColor="'green'"
                               :back-visible="true"
                               :posLabel="posLabel"
                               :home-path="'/pages/index/main'"></BaseNavigationBar>
        </section>
        <!-- 内容区域-->
        <section class="content">
            <!--banner-->
            <BaseBanner :imgUrls="imgUrls" :bannerClass="bannerClass"/>
            <!--功能区-->
            <div class="FeaturesContainer">
                <div class="featureList" v-for="(v,i) in List" :key="i" @click="e_go(v)">
                    <img class="featureLogo" :src="v.logo" alt="">
                    <span class="featureLabel">{{v.label}}</span>
                </div>
            </div>
            <!--专享优惠-->
            <div class="exclusiveArea">
                <span class="exclusivelabel">专属优惠</span>
                <div class="exclusiveListArea">
                    <img class="listIcon" :src="v.logo" v-for="(v,i) in exclusiveList" :key="id" alt="">
                </div>
            </div>
            <!--分享入口-->
            <div class="PopContainer">
                <img class="PopBgi" src="https://maishouxiantuan.oss-cn-beijing.aliyuncs.com/ui/shouye/share.png"
                     alt="">
            </div>
            <!--店铺区域-->
            <div class="shopArea">
                <div class="shopTopArea">
                    <span class="shoptopLabel">周边店铺<span class="shoptopdes">优质产品 放心之选</span></span>
                    <span class="shoptopmore" @click="e_gopage('/pages/ShopList/main')">更多 >></span>
                </div>
                <!--店铺列表-->
                <BaseShopList :ShopList="ShopList"/>
            </div>
            <!--加载动画-->
            <BaseLoading v-if="showLoading"/>
            <!--全局提示消息-->
            <BaseMessage :message="mymessage" v-if="showmessage"/>
        </section>
    </div>
</template>
<style lang='scss'>
    @import "index";
</style>
